<template>
    <div class="flex flex-col h-full">
        <div class="draws-loading">
            <div>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    class="lds-balls"
                    width="80px"
                    height="80px"
                    viewBox="0 0 100 100"
                    preserveAspectRatio="xMidYMid">
                    <circle cx="67.8023" cy="59.9068" r="6" fill="#51CACC">
                        <animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="46.0792" cy="69.9923" r="6" fill="#9DF871">
                        <animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="29.7746" cy="52.4491" r="6" fill="#E0FF77">
                        <animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="41.4208" cy="31.5213" r="6" fill="#DE9DD6">
                        <animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="64.9232" cy="36.1304" r="6" fill="#FF708E">
                        <animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                        <animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
                    </circle>
                </svg>
            </div>

            <div class="text-xl mt-5">
                {{ value.status === 0 ? '排队生成中' : '正在生成中' }}
            </div>

            <div class="mt-2.5 text-bm text-tx-regular w-[215px]">
                绘图大约需要花费30~60s时间，喝杯咖啡稍后再来看效果吧~
            </div>
        </div>

        <el-popover
            placement="bottom"
            effect="dark"
            trigger="hover"
            :width="300"
            :content="value.prompt_in"
        >
            <template #reference>
                <div class="text-tx-regular leading-tight line-clamp-2 h-[42px]">
                    {{ value.prompt_in }}
                </div>
            </template>
        </el-popover>

        <div class="mt-3">
            <div class="flex items-center justify-between">
                <div class="text-sm text-tx-placeholder">
                    {{ value.create_time }}
                </div>
                <div>
                    <el-tag v-if="value.type === 'text2img'">文生图</el-tag>
                    <el-tag v-if="value.type === 'img2img'">图生图</el-tag>
                    <el-tag v-if="value.type === 'upscale2img'">图放大</el-tag>
                    <el-tag v-if="value.type === 'variation2img'">图变换</el-tag>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
withDefaults(
    defineProps<{
        value: DrawsRecordResponse;
    }>(),
    {}
)
</script>

<style lang="scss" scoped>
.draws-loading {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
}
</style>
